<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>租车</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/mui.poppicker.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar .mui-icon {
			color: #666666;
		}
		.mui-title {
			color: #666666;
		}
		.back-img {
			position: relative;
		}
		.back-img img {
			width: 100%;
			height: 240px;
		}
		.rent-car-back {
			position: relative;
			margin-top: -58px;
			padding: 0 10px;
		}
		.rent-car-div {
			padding: 25px 20px;
			border-radius: 10px;
			box-shadow: 2px 2px 10px 1px rgba(106,166,247,0.5);
			background: #fff;
		}
		.car-address {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20px;
			border-bottom: 1px solid #E1E1E1;
		}
		.address-title {
			font-size: 14px;
			font-family:PingFang SC;
			color: #999;
		}
		.select-city {
			min-width: 100px;
			height: 32px;
			background: url(../img/rentCar/select-city.png) right 50% no-repeat;
			background-size: 10px 5px;
			color: #333;
			line-height: 32px;
			font-size: 15px;
			font-family:PingFang SC;
			font-weight: bold;
		}
		.car-place .place-input {
			width: 140px;
			height: 32px;
			padding: 5px;
			border: 0;
			border-bottom: 1px solid rgba(0,0,0,.2);
			font-size: 15px;
			margin-bottom: 0;
			border-radius: 0;
		}
		.rent-car-time {
			margin-top: 20px;
			padding-bottom: 17px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E1E1E1;
		}
		.month-day {
			font-size: 16px;
			font-family:PingFang SC;
			font-weight: bold;
			color: #333;
		}
		.week-hour {
			font-size: 12px;
			font-family:PingFang SC;
			color: #666666;
		}
		.day-number {
			padding-bottom: 4px;
			font-size: 14px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
			border-bottom: 2px solid #5BA9F9;
		}
		.people-age {
			margin-top: 15px;
			padding-bottom: 20px;
			border-bottom: 1px solid #E1E1E1;
			display: flex;
			justify-content: space-between;
		}
		.people-input {
			font-size: 15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #333;
		}
		.people-input input,.driver-age input {
			width: 80px;
			height: 32px;
			padding: 5px;
			border: 0;
			border-bottom: 1px solid rgba(0,0,0,.2);
			font-size: 15px;
			margin-bottom: 0;
			border-radius: 0;
			vertical-align: middle;
		}
		.search-btn {
			margin-top: 20px;
		}
		.search-btn .mui-btn-block {
			padding: 10px 0;
			border-radius: 24px;
			background: linear-gradient(#4fd4fc, #6aa6f7);
			color: #fff;
		}
		.mui-popover {
			height: 300px;
			width: 300px;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-transparent">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">租车</h1>
	</header>
	<div class="mui-content">
		<div class="back-img">
			<img src="../img/rentCar/rent-car-back.jpg" />
		</div>
		<div class="rent-car-back">
			<div class="rent-car-div">
				<div class="car-address">
					<div class="car-city">
						<div class="address-title">取车城市</div>
						<div class="select-city"></div>
					</div>
					<div class="car-place">
						<div class="address-title">取车地点</div>
						<input id="carAddress" class="place-input" type="text" placeholder="请输入取车地点" />
					</div>
				</div>
				<div class="rent-car-time">
					<div  data-options='{"type":"hour"}' class="start-time">
						<input type="hidden" id="startTime" value="" />
						<div class="month-day">01月15日</div>
						<div class="week-hour">星期三 11:00</div>
					</div>
					<div class="day-number"><span id="dayNumber">2</span>天</div>
					<div data-options='{"type":"hour"}' class="end-time">
						<input type="hidden" id="endTime" value="" />
						<div class="month-day">01月17日</div>
						<div class="week-hour">星期三 11:00</div>
					</div>
				</div>
				<div class="people-age">
					<div class="people-num">
						<div class="address-title">人数</div>
						<div class="people-input">
							成人：<input id="adultNum" type="number" value="0" />
						</div>
						<div class="people-input">
							儿童：<input id="childrenNum" type="number" value="0" />
						</div>
					</div>
					<div class="driver-age">
						<div class="address-title">驾驶员年龄</div>
						<input id="driverAvg" type="number" />
					</div>
				</div>
				<div class="search-btn">
					<button type="button" id="submitRentCar" class="mui-btn mui-btn-block">立即租车</button>
				</div>
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		mui.init();
		
		var customerId = base.getParameter("customerId");
		var endTimepicker = {};
		var cityPicker = new mui.PopPicker();
		$(function() {
			getCityList();
			initNowTime();
		});
		//获取城市列表
		function getCityList() {
			base.postData(base.url.getCityList, {}, function(data) {
				if (data.success) {
					var pickerData = new Array();
					for (var i=0; i<data.extendData.cityList.length; i++) {
						if (i == 0) {
							$(".select-city").html(data.extendData.cityList[i].cityName);
						}
						pickerData.push({value: data.extendData.cityList[i].id, text:data.extendData.cityList[i].cityName})
					}
					cityPicker.setData(pickerData);
				}
			});
		}
		//选择城市
		$(".select-city").on('tap', function() {
			cityPicker.show(function(items) {
				$(".select-city").html(items[0].text);
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		});
		
		//初始化当前时间
		function initNowTime() {
			var dateTime=new Date();
			var m = dateTime.getMonth() + 1;  
                m = m < 10 ? ('0' + m) : m;  
            var d = dateTime.getDate();  
                d = d < 10 ? ('0' + d) : d; 
            var h = dateTime.getHours();
            	h = h < 10 ? ('0' + h) : h;
            //当前时间	
            $(".start-time").find(".month-day").html(m+"月"+d+"日");
            $(".start-time").find(".week-hour").html(weekDate(dateTime)+" "+h+":00");
            $("#startTime").val(dateToString(dateTime));
            var date1=new Date().setDate(dateTime.getDate()+1);//当前时间加1天
 			date1=new Date(date1); 
            var date2=new Date().setDate(dateTime.getDate()+2);//当前时间加两天
 			date2=new Date(date2);
 			var m = date2.getMonth() + 1;  
                m = m < 10 ? ('0' + m) : m;  
            var d = date2.getDate();  
                d = d < 10 ? ('0' + d) : d; 
            var h = date2.getHours();
            	h = h < 10 ? ('0' + h) : h;
            //结束时间
            $(".end-time").find(".month-day").html(m+"月"+d+"日");
            $(".end-time").find(".week-hour").html(weekDate(date2)+" "+h+":00");
            $("#endTime").val(dateToString(date2));
            //结束时间选择器
			endTimepicker = new mui.DtPicker({
			    type: "hour",//设置日历初始视图模式 
			    beginDate: date1,//设置开始日期 加一天
			    value: dateToString(date2),//设置显示时间加两天
			})   
		};
		//开始时间
		$(".start-time").on('tap', function() {
			var dtpicker = new mui.DtPicker({
			    type: "hour",//设置日历初始视图模式 
			    beginDate: new Date(),//设置开始日期 （当前时间）
			}) 
			dtpicker.show(function(e) {
			    $(".start-time").find(".month-day").html(e.m.text+"月"+e.d.text+"日");
			    var dateTime = e.text;
			    dateTime = stringFromDate(dateTime);
            	$(".start-time").find(".week-hour").html(weekDate(dateTime)+" "+ e.h.text +":00");
            	$("#startTime").val(e.text);
            	//给结束时间添加两天
            	var date1 = new Date().setDate(dateTime.getDate() + 1);
            	date1=new Date(date1);
            	var date2 = new Date().setDate(dateTime.getDate() + 2);//当前时间加两天
 				date2=new Date(date2);
 				var m = date2.getMonth() + 1;  
	                m = m < 10 ? ('0' + m) : m;  
	            var d = date2.getDate();  
	                d = d < 10 ? ('0' + d) : d; 
	            //结束时间
	            $(".end-time").find(".month-day").html(m+"月"+d+"日");
	            $(".end-time").find(".week-hour").html(weekDate(date2)+" "+e.h.text+":00");
	            date1 = stringFromDate(dateToString(date1).split(" ")[0] + " 00");
	            date2 = dateToString(date2).split(" ")[0] + " " + e.h.text;
            	//结束时间选择器
				endTimepicker = new mui.DtPicker({
				    type: "hour",//设置日历初始视图模式 
				    beginDate: date1,//设置开始日期 加一天
				    value: date2,//设置显示时间加两天
				}); 
				$("#endTime").val(date2);
			}) 
		});
		//结束时间
		$(".end-time").on('tap', function() {
			endTimepicker.show(function(e) {
			    $(".end-time").find(".month-day").html(e.m.text+"月"+e.d.text+"日");
			    var dateTime = e.text;
			    dateTime = stringFromDate(dateTime);
            	$(".end-time").find(".week-hour").html(weekDate(dateTime)+" "+ e.h.text +":00");
            	$("#endTime").val(e.text);
            	//计算两个时间相差的天数
            	var dayNum = DateMinus($("#startTime").val()+":00", e.text+":00");
            	dayNum == 0? dayNum=1:dayNum;
            	$("#dayNumber").html(dayNum);
			}) 
		});
		//点击立即租车
		$("#submitRentCar").on('tap', function() {
			var cityName = $(".select-city").html();
			var carAddress = $("#carAddress").val();
			if (carAddress == null || carAddress == "") {
				mui.toast("请填写取车地点");
				return;
			}
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			var dayNum = $("#dayNumber").text();
			var adultNum = $("#adultNum").val();
			if (adultNum == '' || adultNum == 0) {
				mui.toast("请填写成人人数");
				return;
			}
			var childrenNum = $("#childrenNum").val();
			var driverAvg = $("#driverAvg").val();
			if (driverAvg == null || driverAvg == '') {
				mui.toast("请填写驾驶员年龄");
				return;
			}
			var params = {
				cityName: cityName,
				carAddress: carAddress,
				startTime: startTime,
				endTime: endTime,
				dayNum: dayNum,
				adultNum: adultNum,
				childrenNum: childrenNum,
				driverAvg: driverAvg
			}
			window.localStorage.setItem("rentCarInfo", JSON.stringify(params));
			window.location.href = "rentCarList.html?cityName="+cityName+"&customerId="+customerId;
		});
		//时间格式转为字符串
		function dateToString(date){ 
			var year = date.getFullYear(); 
			var month =(date.getMonth() + 1).toString(); 
			var day = (date.getDate()).toString();  
			var hour = date.getHours();
			hour = hour < 10 ? ('0' + hour) : hour; 
			if (month.length == 1) { 
			    month = "0" + month; 
			} 
			if (day.length == 1) { 
			    day = "0" + day; 
			}
			var dateTime = year + "-" + month + "-" + day + " " + hour;
			return dateTime; 
		}
	</script>
</body>
</html>
